<template>
  <view class="profile-container">
    <view class="user-card">
      <view class="upload-wrap">
  <image :src="avatar || '/static/top1.png'" class="avatar" />
  <text class="upload-text" @click="uploadAvatar">更换头像</text>
</view>
      <view class="user-info">
        <text class="name">张三</text>
        <text class="email">zhangsan@example.com</text>
      </view>
    </view>

    <view class="settings-form">
      <view class="form-item">
        <text>消息通知</text>
        <switch checked color="#4a90e2" />
      </view>
      <view class="form-item">
        <text>主题设置</text>
        <picker :range="['浅色', '深色']" @change="(e) => currentTheme = themeOptions[e.detail.value]">
          <text class="picker">{{ currentTheme === 'light' ? '浅色' : '深色' }}</text>
        </picker>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const currentTheme = computed({
  get: () => store.state.settings.theme,
  set: (val) => {
    store.commit('UPDATE_THEME', val);
    uni.setStorageSync('THEME', val);
  }
});
const themeOptions = computed(() => store.getters.themeOptions);

const avatar = ref('')

onMounted(() => {
  avatar.value = store.state.settings.avatar;
});
const uploadAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFile = res.tempFiles[0];
      if (tempFile) {
        store.commit('UPDATE_AVATAR', tempFile.path);
      }
    }
  });
};
</script>

<style>
.profile-container {
  padding: 40rpx;
  background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
  min-height: 100vh;
}

:root {
  --page-bg-start: #f5f7fa;
  --page-bg-end: #e6e9ef;
  --text-primary: #2d3748;
}

[data-theme="dark"] {
  --page-bg-start: #2d3748;
  --page-bg-end: #1a202c;
  --text-primary: #e2e8f0;
}

.name {
  color: var(--text-primary);
}

.upload-wrap {
  position: relative;
}

.upload-text {
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #4a90e2;
  background: rgba(255,255,255,0.9);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  white-space: nowrap;
}

.user-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
    border-radius: 12rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.user-info {
  flex: 1;
}

.name {
  font-size: 36rpx;
  color: #2d3748;
  margin-bottom: 10rpx;
}

.email {
  font-size: 28rpx;
  color: #718096;
}

.settings-form {
  margin-top: 40rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 0 30rpx;
}

.form-item {
  @extend %base-form-item;
}

.form-item:last-child {
  border-bottom: none;
}

.picker {
  transition: all 0.3s ease;
  color: #4a90e2;
  font-size: 30rpx;
}
</style>